<template>
    <cardComponent
        class="accountSafe-container"
        pageTitle="操作服务类-->账户安全锁"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <template slot="cardBody">
            <el-table :data="tableData" width="100%" border class="heard-bg business_table">
                <el-table-column label="禁止项" prop="name"></el-table-column>
                <el-table-column label="是否禁止" prop="isDisabled">
                    <template slot-scope="scope">
                        <span
                            class="checkbox4"
                            @mouseenter="handleShowId(scope.row.id)"
                            @mouseleave="handleResetId"
                        >
                            <el-checkbox v-model="scope.row.isDisabled"></el-checkbox>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="禁止项开始时间（HHmm）" prop="startDate">
                    <template slot-scope="scope">
                        <el-time-picker
                            v-model="scope.row.startDate"
                            placeholder="请选择禁止项开始时间"
                            format="HH:mm"
                            value-format="HH:mm"
                            @change="handleChangeTime($event, 'endDate', scope.row)"
                            :disabled="!scope.row.isDisabled"
                            :picker-options="{
                                selectableRange: '00:00:00 - 23:59:59'
                            }"
                        ></el-time-picker>
                    </template>
                </el-table-column>
                <el-table-column label="禁止项结束时间（HHmm）" prop="endDate">
                    <template slot-scope="scope">
                        <el-time-picker
                            v-model="scope.row.endDate"
                            @change="handleChangeTime($event, 'startDate', scope.row)"
                            type="time"
                            placeholder="请选择禁止项结束时间"
                            format="HH:mm"
                            value-format="HH:mm"
                            :disabled="!scope.row.isDisabled"
                            :picker-options="{
                                selectableRange: '00:00:00 - 23:59:59'
                            }"
                        ></el-time-picker>
                    </template>
                </el-table-column>
            </el-table>
            <div class="warmPrompt">
                <p>温馨提示：</p>
                <p>1.部分代扣类交易以及国际组织允许的境外交易等不受本功能影响。</p>
                <p>2.本功能不能代替挂失、销卡服务，若信用卡片丢失，请通过我行客服进行卡片挂失、换卡服务</p>

                <p :class="currentShowId === 1 ? 'text show' : 'text'">“有卡交易”意指使用信用卡片进行的交易</p>
                <p :class="currentShowId === 2 ? 'text show' : 'text'">“ATM交易”意指在ATM机具上进行的交易</p>
                <p
                    :class="currentShowId === 3 ? 'text show' : 'text'"
                >“无卡交易”意指排除刷卡类交易（磁条、芯片、QuickPass等各种读取信用卡信息进行的交易）以外的交易，如快捷支付、网络支付、扫码支付、电话支付等</p>
                <p
                    :class="currentShowId === 4 ? 'text show' : 'text'"
                >“境外交易”意指以交易受理行提供的交易地信息为依据，交易地非中国大陆地区的视为境外交易。</p>
                <p :class="showTips? 'text show' : 'text'">温馨提示：时间为八点十分则输入0810</p>
            </div>
            <div style="margin-top: 16px;text-align: center;">
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-circle-check"
                    @click="handleSubmit"
                >提 交</el-button>
            </div>
        </template>
    </cardComponent>
</template>

<script>
import { mapState } from 'vuex';
import cardComponent from '@/components/cardComponent/cardComponent.vue';

export default {
    name: 'accountSafe',
    components: {
        cardComponent,
    },
    data() {
        return {
            formData: {},
            showTips: false, // 是否显示时间输入提示
            // 搜索loading
            currentShowId: 0,
            pageLoading: false, // 页面loading
            tableData: [
                {
                    name: '禁止有卡消费',
                    isDisabled: false,
                    startDate: '',
                    endDate: '',
                    id: 1,
                },
                {
                    name: '禁止ATM交易',
                    isDisabled: false,
                    startDate: '',
                    endDate: '',
                    id: 2,
                },
                {
                    name: '禁止无卡交易',
                    isDisabled: false,
                    startDate: '',
                    endDate: '',
                    id: 3,
                },
                {
                    name: '禁止境外交易',
                    isDisabled: false,
                    startDate: '',
                    endDate: '',
                    id: 4,
                },
            ],
            oldData: {}, // 查询结果数据 -> 用于和表单数据作比较， 是否需要修改
        };
    },
    mounted() {
        this.getTableData();
    },

    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        defaultParams: state => state.common.defaultParams, // 交易默认请求报文
        pinFlag: state => state.common.pinFlag, // 是否检查密码标志
    }),

    methods: {
        // 获取页面初始化数据
        getTableData() {
            this.pageLoading = true;
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                PINFLAG: this.pinFlag,
            };
            params.body.appHead.tranCode = '3014';
            params.body.appBody = appBody;

            // 跑 3014 交易
            this.$post.common.transPort(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, '响应数据 -- 3014');
                    if (result.sysHead.rspCd === '000000') { // 交易成功
                        // 数据处理
                        this.handleDealInitData(result);
                    }
                }
            });
        },

        // 数据查询处理
        handleDealInitData(result) {
            const data = result.body.appBody;
            this.tableData.forEach((item) => {
                if (item.name === '禁止有卡消费') {
                    item.isDisabled = data.FBPOS != 0;
                    item.startDate = this.getFormatTime(data.FBPOSST, 1);
                    item.endDate = this.getFormatTime(data.FBPOSED, 1);
                } else if (item.name === '禁止ATM交易') {
                    item.isDisabled = data.FBATM != 0;
                    item.startDate = this.getFormatTime(data.FBATMST, 1);
                    item.endDate = this.getFormatTime(data.FBATMED, 1);
                } else if (item.name === '禁止无卡交易') {
                    item.isDisabled = data.FBNOCARD != 0;
                    item.startDate = this.getFormatTime(data.NOCARDST, 1);
                    item.endDate = this.getFormatTime(data.NOCARDED, 1);
                } else if (item.name === '禁止境外交易') {
                    item.isDisabled = data.FORIN != 0;
                    item.startDate = this.getFormatTime(data.FORINST, 1);
                    item.endDate = this.getFormatTime(data.FORINED, 1);
                }
            });
            this.oldData = JSON.parse(JSON.stringify(this.tableData));
        },

        // 选择时间
        handleChangeTime(e, property, row) {
            if (e) {
                console.log(e, 'e');
                console.log(property, 'property');
                console.log(row, 'row');
                if (row[property]) {
                    const time1 = Number(e.split(':').join(''));
                    const time2 = Number(row[property].split(':').join(''));
                    if (property === 'startDate') {
                        if (time1 < time2) {
                            this.$alert('禁止项结束时间不能小于禁止项开始时间，请重新选择！', '提示', {
                                customClass: 'warning', type: 'warning',
                            });
                            row.endDate = '';
                        }
                    } else if (time1 > time2) {
                        this.$alert('禁止项开始时间不能大于禁止项结束时间，请重新选择！', '提示', {
                            customClass: 'warning', type: 'warning',
                        });
                        row.startDate = '';
                    }
                }
            }
        },

        // 时间处理
        getFormatTime(time, type) {
            if (!time) {
                time = '';
            } else if (type === 1) { // 转换查询结果时间
                if (typeof (time) !== 'sting') {
                    time = (`${time}`).trim();
                } else {
                    time = time.trim();
                }
                if (time) {
                    const arr = time.split('');
                    arr.splice(2, 0, ':');
                    time = arr.join('');
                }
                // console.log(time, '处理后的时间')
            } else { // 处理提交时间
                if (time.trim()) {
                    const arr = time.split('');
                    arr.splice(2, 1);
                    time = arr.join('');
                }
            }
            return time;
        },

        // 点击提交
        handleSubmit() {
            let flag = false;
            // 校验输入
            this.tableData.forEach((item) => {
                if (item.isDisabled) { // 勾选了复选框
                    if (item.startDate && !item.endDate) {
                        this.$alert('请选择禁止项结束时间', '提示', {
                            customClass: 'warning', type: 'warning',
                        });
                        flag = true;
                    } else if (!item.startDate && item.endDate) {
                        this.$alert('请选择禁止项开始时间', '提示', {
                            customClass: 'warning', type: 'warning',
                        });
                        flag = true;
                    }
                }
            });
            if (flag) {
                return;
            }
            // this.pageLoading = true
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            const submitData = this.dealSubmitData();
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                PINFLAG: this.pinFlag,
                SEVOPT: '12', // 修改项目
                CHKOPT: '', // 检查项目
                RMBBILL: '', // 外卡交易第一币种入账
                SERCNT: `${submitData.SERCNT}999999999999999999`, // 交易控服务种类
                FBPOSST: submitData.data[0].startDate, // 禁止有卡消费时间段（开始）
                FBPOSED: submitData.data[0].endDate, // 禁止有卡消费时间段（结束）
                FBATMST: submitData.data[1].startDate, // 禁止ATM交易时间段（开始）
                FBATMED: submitData.data[1].endDate, // 禁止ATM交易时间段（结束）
                NOCARDST: submitData.data[2].startDate, // 禁止无卡交易时间段（开始）
                NOCARDED: submitData.data[2].endDate, // 禁止无卡交易时间段（结束）
                FORINST: submitData.data[3].startDate, // 禁止境外交易时间段（开始）
                FORINED: submitData.data[3].endDate, // 禁止境外交易时间段（结束）
            };
            params.body.appHead.tranCode = '4078';
            params.body.appBody = appBody;
            console.log(params, '请求参数');

            // 跑 4078交易
            this.$post.common.transPort(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, '响应数据 -- 4078');
                    if (result.sysHead.rspCd === '000000') { // 交易成功
                        this.$alert('修改成功', '提示', {
                            customClass: 'success', type: 'success',
                        }).then(() => {
                            // 重新查询数据
                            this.getTableData();
                        });
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alert('请求失败', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },

        // 处理提交数据
        dealSubmitData() {
            const strArr = ['0', '9', '9', '0', '9', '9', '0', '9', '9', '0', '9', '9'];
            const data = JSON.parse(JSON.stringify(this.tableData));
            const oldData = JSON.parse(JSON.stringify(this.oldData));
            data.forEach((item, index) => {
                const i = index * 3;
                if (item.isDisabled) { // 勾选了复选框
                    strArr.splice(i, 3, '1', '1', '1');

                    if (item.startDate !== oldData[index].startDate) { // 比较开始时间是否相同
                        strArr.splice(i + 1, 1, '1');
                    }

                    if (item.endDate !== oldData[index].endDate) { // 比较结束时间是否相同
                        strArr.splice(i + 2, 1, '1');
                    }
                }
                item.startDate = this.getFormatTime(item.startDate, 2);
                item.endDate = this.getFormatTime(item.endDate, 2);
            });
            const res = strArr.join('');
            const submitData = {
                data,
                SERCNT: res,
            };
            // console.log(submitData, 'submitData')
            return submitData;
        },

        // 鼠标进入 ->获取id 显示对应p标签
        handleShowId(id) {
            this.currentShowId = id;
        },

        // 鼠标离开 -> 充值id
        handleResetId() {
            this.currentShowId = 0;
        },
    },
};
</script>

<style lang="scss" scoped>
.accountSafe-container {
    .warmPrompt {
        color: red;
        font-size: 14px;
        margin-top: 20px;
        text-align: left;
        line-height: 30px;
        height: 130px;

        .text {
            display: none;
        }

        .text.show {
            display: block;
        }
    }
}
</style>
